<template>
  <div class="record-detail" v-loading="loading">
    <div class="operate-btn">
      <div @click="back">返回</div>
      <div class="submit" @click="submitInfo">提交信息</div>
    </div>

    <el-form :model="recordForm" :rules="rules" label-width="80px" ref="demoFormRef">
      <el-card shadow="hover">
        <div class="record-info">
          <div class="info-left">
            <el-image class="info-img" fit="contain" :src="customerDetail.logo">
              <template #error>
                <span></span>
              </template>
            </el-image>
          </div>
          <div class="info-right">
            <p class="info-title">{{customerDetail.zhName}}</p>

            <div class="basic-info">
              <p class="basic-title">基本信息</p>

              <el-form-item label="拜访时间" prop="visitDate">
                <el-date-picker v-model="recordForm.visitDate" type="date" placeholder="请选择拜访时间" value-format="YYYY-MM-DD" />
              </el-form-item>
              <el-form-item label="客户经理" prop="visitor">
                <el-input v-model="recordForm.visitor" disabled />
              </el-form-item>
              <el-form-item label="拜访对象" prop="visitees">
                <el-input v-model="recordForm.visitees" placeholder="请输入拜访对象" />
              </el-form-item>
              <el-form-item label="同行人" prop="peersName">
                <el-input v-model="recordForm.peersName" placeholder="请输入同行人" />
              </el-form-item>
            </div>
          </div>
        </div>
      </el-card>

      <el-card shadow="hover" style="margin-top: 20px">
        <el-form-item label="" prop="visitTitle" label-width="0">
          <el-input v-model="recordForm.visitTitle" placeholder="标题编辑" />
        </el-form-item>
        <el-form-item label="" prop="details" label-width="0">
          <el-input v-model="recordForm.details" placeholder="内容编辑" type="textarea" :rows="8" show-word-limit maxlength="500" />
        </el-form-item>
        <el-form-item label="" label-width="0" prop="imageUrl">
          <ImageUpload v-model="recordForm.imageUrl" />
        </el-form-item>
        <el-form-item label="" label-width="0" prop="annexUrl">
          <FileUpload :fileType="['pdf', 'docx', 'doc', 'xlsx', 'ppt', 'pptx']" @success="uploadFile" :file-list="annexList" />
        </el-form-item>
      </el-card>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {recordDetail, saveRecord, updateRecord} from "@/api/visitRecords";
import {FormInstance} from "element-plus";
import ImageUpload from "@/components/ImageUpload/imageUpload.vue"
import FileUpload from "@/components/FileUploadNew/index.vue";
import {customerDetail} from '../customerService';
import useUserStore from "@/store/modules/user";

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const customId = route.query.customId as string;
const id = route.query.id as string;
const loading = ref(false);
const initForm = () => {
  return {
    id: '',
    customId: customId,
    visitTitle: '',
    visitDate: '',
    details: '',
    annexUrl: '',
    visitor: userStore.name,
    visitees: '',
    peersName: '',
    imageUrl:  '',
    customName: ''
  }
};
const demoFormRef = ref<FormInstance>();
const recordForm = ref(initForm());
const rules = {
  visitTitle: { required: true, message: '请输入拜访标题', trigger: 'blur' },
  visitDate: { required: true, message: '请选择拜访时间', trigger: 'blur' },
  visitees: { required: true, message: '请输入拜访对象', trigger: 'blur' }
};
const annexList = ref<string[]>([]);

function back() {
  router.back()
}

function submitInfo() {
  if (loading.value) return
  demoFormRef.value?.validate((valid) => {
    if (valid) {
      if (recordForm.value.id) {
        updateRecord(recordForm.value).then((res: any) => {
          if (+res.code === 200) {
            proxy?.$modal.msgSuccess("修改成功");
            back()
          }
        })
      } else {
        saveRecord(recordForm.value).then((res: any) => {
          if (+res.code === 200) {
            proxy?.$modal.msgSuccess("新增成功");
            back()
          }
        })
      }
    }
  })
}

function uploadFile(arr: string[]) {
  recordForm.value.annexUrl = arr.join(',')
}

function getDetail() {
  if (!id) return
  loading.value = true;
  recordDetail(id).then((res: any) => {
    recordForm.value = res.data;
    annexList.value = res.data.annexUrl ? res.data.annexUrl.split(',') : [];
    recordForm.value.visitor = res.data.visitor || userStore.name;
  }).finally(() => loading.value = false)
}

getDetail()
defineComponent({name: 'RecordIndex'})
</script>

<style scoped lang="scss">
.record-detail {
  width: 100%;
  height: auto;
  margin-top: 50px;
  padding: 0 30px;

  .operate-btn {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    padding-right: 210px;
    display: flex;
    justify-content: end;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
    z-index: 99;

    div {
      width: 140px;
      height: 50px;
      margin-left: 30px;
      text-align: center;
      font-size: 16px;
      color: #FF4350;
      line-height: 48px;
      border-radius: 10px;
      border: 1px solid #FF4350;
      cursor: pointer;
    }

    .submit {
      color: #fff;
      border: none;
      background: linear-gradient(296deg, #FF4350 0%, #FF4553 35%, #FFADB3 100%);
    }
  }

  .record-info {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px 56px;

    .info-left {
      width: 250px;
      height: 250px;
      margin-right: 20px;

      .info-img {
        width: 250px;
        height: 250px;
      }
    }

    .info-right {
      width: calc(100% - 270px);

      .info-title {
        width: calc(100% - 20px);
        height: 48px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 34px;
        color: #2E3244;
        line-height: 48px;
        text-align: left;
        font-style: normal;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .basic-info {

        .basic-title {
          margin: 20px 0;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 20px;
          color: #2E3244;
          line-height: 28px;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }
}
</style>
